<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
	<ui:composition template="/WEB-INF/facelets/template.xhtml">
		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>
				<h:form id="frm">
					<p:messages id="msg" showDetail="false" />
					<p:growl id="men" />
					<p:panel id="panelInfoSolicitante"
						header="Información del Solicitante"
						style="height:350px;width:1070px; text-align:center">
						<div align="center">
							<h:panelGrid columns="3" id="panelGrid">
								<h:outputText id="msgIdTpDoc_TipoDocumento"
									value="*Tipo de Documento:" />
								<p:selectOneMenu id="TipoDocumento"
									value="#{infoSolicitanteView.idTipoDocumento}"
									style="height:20px;width:215px">
									<f:selectItem itemLabel="Seleccione" itemValue="" />
									<f:selectItems value="#{infoSolicitanteView.tipoDocumento}" />
									<p:ajax listener="#{infoSolicitanteView.cambiarMaskNit}"
										update="txtNumeroIdentificacion" />
								</p:selectOneMenu>
									<p:tooltip id="tooltipSelNumDoc" for="TipoDocumento" 
								value="Seleccionar un tipo de documento de la lista."/>

								
								<h:outputText id="msgNumeroIdentificacion"
									value="*Número de Identificación:" />
								<p:inputMask id="txtNumeroIdentificacion"
									value="#{infoSolicitanteView.numeroIdentificacion}"
									mask="#{infoSolicitanteView.maskNit}" 
									maxlength="20" size="30" />
								<p:tooltip id="tooltiptxtNumDoc2" for="txtNumeroIdentificacion" 
									value="Ingresar un número de identificación."/>									
								

								<h:outputText id="msgNombreEmpresa"
									value="Nombre de la Empresa:" />
								<p:inputText id="txtNombreEmpresa"
									binding="#{infoSolicitanteView.txtNombreEmpresa}"
									maxlength="50" size="30" />
								<p:tooltip id="tooltiptxtNomEmpresa" for="txtNombreEmpresa" 
								value="Ingresar el nombre de la empresa a la cual pertenece."/>
									

								<h:outputText id="msgNombreContacto"
									value="*Nombre de Contacto:" />
								<p:inputText id="txtNombreContacto"
									binding="#{infoSolicitanteView.txtNombreContacto}"
									maxlength="50" size="30" />
								<p:tooltip id="tooltipNomContacto" for="txtNombreContacto" 
								value="Ingrese un Nombre de contacto."/>

								<h:outputText id="msgCorreoElectronico"
									value="*Correo Electronico:" />
								<p:inputText id="txtCorreoElectronico"
									binding="#{infoSolicitanteView.txtCorreoElectronico}"
									maxlength="50" size="30" />
								<p:tooltip id="tooltiptxtCorreo" for="txtCorreoElectronico" 
								value="Ingrese un Correo electronico."/>
						
								<h:outputText id="msgNumeroCelular" value="*Numero Celular:" />
								<p:inputMask id="txtNumeroCelular"
									value="#{infoSolicitanteView.numeroCelular}"
									mask="(999) 999-9999" maxlength="10" size="30" />
								<p:tooltip id="tooltiptxtCelular" for="txtNumeroCelular" 
								value="Ingrese un Numero de celular."/>
							

								<h:outputText id="msgTelefonoFijo" value="*Telefono Fijo:" />
								<p:inputMask id="txtTelefonoFijo"
									value="#{infoSolicitanteView.telefonoFijo}" mask="999-99-99"
									maxlength="7" size="30" />
								<p:tooltip id="tooltiptxtFijo" for="txtTelefonoFijo" 
								value="Ingrese un Telefono fijo."/>
								
							</h:panelGrid>
						</div>
					</p:panel>
					<p:panel id="panelBoton" style="height:40px;width:1070px">
						<div align="center">
							<p:commandButton id="btnSave" value="Guardar"
								binding="#{infoSolicitanteView.btnSave}"
								action="#{infoSolicitanteView.action_save()}"
								update="panelInfoSolicitante,msg,panelBoton" />
							<p:commandButton id="btnClear" value="Limpiar"
								action="#{infoSolicitanteView.action_clear()}"
								binding="#{infoSolicitanteView.btnClear}"
								update="panelInfoSolicitante,msg,panelBoton" />
							<p:commandButton id="btnSiguiente" value="Siguiente"
								disabled="#{!infoSolicitanteView.siguiente}"
								action="#{infoSolicitanteView.action_solicitud()}"
								update=":dialogInfoSolicitud" />
						</div>
					</p:panel>
				</h:form>
				<p:dialog id="dialogInfoSolicitud" appendToBody="true"
					draggable="true" closable="false"
					visible="#{infoSolicitanteView.solicitud}" resizable="false"
					modal="true" width="500">
					<h:form id="formDialog">
						<p:messages id="msg" showDetail="false" />
						<p:panel id="panelInfoSolicitante"
							header="Seleccione un Tipo de Solicitud PQR">
							<h:panelGrid columns="1" id="panelGrid">
								<p:selectOneRadio id="tipoSolicitud"
									value="#{infoSolicitanteView.idTipoSolicitud}" layout="grid"
									columns="5">
									<f:selectItems value="#{infoSolicitanteView.tipoSolicitud}"
										var="tipoSol" itemLabel="#{tipoSol.descTpSol}"
										itemValue="#{tipoSol.idTpSolPqr}" />
								</p:selectOneRadio>
							</h:panelGrid>
						</p:panel>
						<p:panel id="panelBotones">
							<div align="center">
								<p:commandButton id="btnExit" value="Atras"
									action="#{infoSolicitanteView.action_closeDialog_solicitud()}"
									update=":dialogInfoSolicitud" />
								<p:commandButton id="btnInstructivo" value="Siguiente"
									action="#{infoSolicitanteView.action_instructivo()}"
									update=":dialogInstructivo, :dialogInfoSolicitud" />
							</div>
						</p:panel>
					</h:form>
				</p:dialog>
				<p:dialog id="dialogInstructivo" appendToBody="true"
					draggable="true" closable="false"
					visible="#{infoSolicitanteView.instructivo}" resizable="false"
					modal="true" width="500">
					<h:form id="formDialogInstructivo">
						<p:messages id="msg" showDetail="false" />
						<p:panel id="panelInstructivo"
							header="#{infoSolicitanteView.descTpSol}">
							<h:panelGrid columns="1" id="panelGrid">
								<h:inputTextarea value="#{infoSolicitanteView.descripcionParametro}" 
									disabled="true" style="height:200px;width:440px;"/>
								<h:outputText value="Para este tipo de solicitud debe incluir los siguientes anexos:" />
								<h:panelGrid columns="2" cellpadding="5">
									<p:dataTable id="tablaAnexosXTipoSol"
										value="#{infoSolicitanteView.anexosPqrs}" var="anexosPqr">
										<p:column>
											<h:outputText value="#{anexosPqr.descripcionAnexo}" />
										</p:column>
									</p:dataTable>
								</h:panelGrid>
							</h:panelGrid>
						</p:panel>
						<p:panel id="panelBotones">
							<div align="center">
								<p:commandButton id="btnExit" value="Atras"
									action="#{infoSolicitanteView.action_closeDialog_instructivo()}"
									update=":dialogInstructivo" />
								<p:commandButton value="Siguiente"
									url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/XHTML/solicitudPqr.xhtml" />
							</div>
						</p:panel>
					</h:form>
				</p:dialog>
			</f:view>
		</ui:define>
	</ui:composition>
</h:body>
</html>